<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 定义一个容器，用于显示虚拟滚动列表 -->
    <div id="scroll-container" style="height: 300px; overflow-y: auto; border: 1px solid #ccc;"></div>
    <script src="./index.js"></script>
    <script>
        // 使用VirtualScrollList类来初始化虚拟滚动列表
        const container = document.getElementById('scroll-container');
        const totalItems = 10000; // 总项目数
        // 创建虚拟滚动列表实例
        new VirtualScrollList(
            container,
            30, // 每个项目的高度
            totalItems,
            10, // 可视区域内显示的项目数
            5, // 缓冲区内的项目数
            (index) => {
                // 渲染每个项目的回调函数
                const item = document.createElement('div');
                item.textContent = `Item ${index + 1}`;
                item.style.background = index % 2 === 0 ? '#f9f9f9' : '#e9e9e9';
                return item;
            }
        );
    </script>
</body>
</html>